<template>
    <div style="color: #fff;">
        <div class="paintinginsidebox">
            <div style="height: .98rem">
                <div class="toptools">
                    <svg @click="$router.push('/index')" t="1674987056061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2285"><path stroke="#ffffff" stroke-width="25" d="M362.666667 896c-4.266667 0-8.533333 0-12.8-4.266667-8.533333-8.533333-8.533333-21.333333-4.266667-29.866666L631.466667 512 345.6 162.133333c-8.533333-8.533333-4.266667-21.333333 4.266667-29.866666 8.533333-8.533333 21.333333-4.266667 29.866666 4.266666l298.666667 362.666667c8.533333 8.533333 8.533333 21.333333 0 25.6l-298.666667 362.666667c-4.266667 4.266667-12.8 8.533333-17.066666 8.533333z" fill="#ffffff" p-id="2286"></path></svg>
                    <span>画作推荐</span>
                    <img src="@/assets/images/搜索.png" alt="">
                </div>
            </div>

            <div v-for="(o, i) in workers" :key="i" class="showbox">
                <!-- 轮播图展示 -->
                <el-carousel :interval="4000" :autoplay="true" type="card">
                    <el-carousel-item v-for="(a, i) in o.worker1" :key="i">
                        <div class="itembox">
                            <div class="textbox">
                                <h2 class="medium">{{ a.name }}</h2>
                                <p>{{ a.eglishname }}</p>
                            </div>
                            <img :src="require('../../../../server/public/images/class/' + a.img)" alt="">
                        </div>
                    </el-carousel-item>
                </el-carousel>
                <!-- 艺是纵横 -->
                <div class="worker2" v-for="(b, i) in o.worker2" :key="i">
                    <div class="title">
                        <div style="width: 1rem;"></div>
                        <h2>艺是纵横</h2>
                        <span>查看全部</span>
                    </div>
                    <img :src="require('../../../../server/public/images/class/' + b.img)" alt="">
                </div>

                <div class="worker3">
                    <div class="title">
                        <h2>情绪画作</h2>
                    </div>
                    <div class="imgbox">
                        <div  v-for="(c, i) in o.worker3" :key="i">
                            <img :src="require('../../../../server/public/images/class/' + c.img)" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 情绪画作 -->
            
        </div>
    </div>
</template>

<script>
export default {
    name: 'Vue2PaintingInside',

    data() {
        return {
            workers: [
                {
                    worker1: [
                        {name: '暴风雨', eglishname: 'The Storm', img: '暴风雨.jpg'},
                        {name: '秋千', eglishname: 'The swing', img: '秋千.jpg'},
                        {name: '贝奥景观', eglishname: 'Beacue landspeca', img: '贝奥景观.jpg'},
                    ],
                    worker2: [
                        {name: '永恒的记忆', eglishname: 'The Storm', img: '永恒的记忆.jpg'},
                    ],
                    worker3: [
                        {name: '吻', eglishname: 'The Storm', img: '吻.jpg'},
                        {name: '葛蕾夫人处刑', eglishname: 'The Storm', img: '葛蕾夫人处刑.jpg'},
                        {name: '两个皇冠', eglishname: 'The Storm', img: '两个皇冠.jpg'},
                        {name: '费德尔', eglishname: 'The Storm', img: '费德尔.jpg'},
                    ],
                }
            ]
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style lang="scss">
@import '@/assets/css/index/PaintingRecommend/PaintingInside.scss'
</style>